<style>
  .filepath-editor-image-upload-reset-button {
    position: absolute;
    right: 0;
    top: 0;
  }
</style>

<div ng-if="!hasExplorationId()">
  Warning: The file picker does not work outside the context of an exploration.
</div>

<div ng-if="hasExplorationId()" ng-model="localValue"
     ui-validate="'validate($value)'">
  <div ng-show="!imageUploaderIsActive">
    <div ng-if="!filepathsLoaded">
      <span class="text-align: center; width: 50px;">
        Loading...
      </span>
    </div>

    <div ng-repeat="filepath in filepaths track by $index">
      <label>
        <input type="radio" ng-model="localValue.label"
               name="choiceGroup" id="<[filepath]>"
               value="<[filepath]>">
        <[filepath]>
      </label>
    </div>
    <img ng-if="localValue.label" ng-src="<[getPreviewUrl(localValue.label)]>"/>

    <br><br>
    <button type="button" class="btn btn-default" ng-click="openImageUploader()">Upload a new image</button>
  </div>

  <div ng-if="imageUploaderIsActive" style="border: 1px solid black; padding: 5px;">
    <div class="oppia-warning">
      Before uploading any images, please ensure that they are compatible with the <a href="/about#license" target="_blank">license terms</a> of this site (the link opens in a new window).
    </div>

    <br>

    <div ng-if="!currentFile">
      <image-uploader on-file-changed="onFileChanged">
      </image-uploader>

      <div ng-if="uploadWarning" style="color: red;">
        <br>
        <strong>Error:</strong> <[uploadWarning]>
      </div>
    </div>

    <div ng-if="currentFile" style="position: relative;">
      <button class="btn btn-default filepath-editor-image-upload-reset-button" ng-click="resetImageUploader()">
        <span class="glyphicon glyphicon-remove"></span>
      </button>

      <img ng-src="<[imagePreview]>">
    </div>

    <br>
    Choose a filename:
    <input type="text" ng-model="currentFilename" class="protractor-test-file-name">

    <button type="button" class="btn btn-success" ng-click="saveUploadedFile(currentFile, currentFilename)" ng-disabled="!currentFile || !currentFilename">Save</button>
    <button type="button" class="btn btn-default" ng-click="closeImageUploader()">Cancel</button>
  </div>
</div>
